<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
       /* 方法1 */
        /* div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);   
        } */

        /* 方法2 */
        /* body{
            width: 100%;
            background-color: blueviolet;
            display: flex; 
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        } */
    </style>
</head>
<body>
    <!-- 3. -->
    <div></div>
    <script>
        // 4.
        // (1)es5:var声明
        // (2)es6:let,const声明
        // 区别
        // var                                                   let,const
        // 可以变量提升                                           不可以
        // 没有块级作用域，e6s前靠闭包实现（只有全局和局部）        有块级作用域
        // 可以重复声明变量                                       不可以
        // 在全局下声明的变量有全局对象的属性                       没有
        // const不能重新赋值，let可以重新赋值

        // 5.css3新特性
        // (1)E:nth-child(n)匹配父元素的第n个子元素E
        // (2)弹性盒子模型display:flex
        // (3)颜色透明度：color:rgba(255,0,0,0.75)
        // (4)圆角：border-radius: 5px，border-color,border-image,background-origin,background-clip
        // text-shadow：文本阴影,word-wrap：自动换行
        // (5)阴影：box-shadow:3px(左右) 3px(上下) 3px(阴影大小或者模糊距离) rgba()
        // (6)文字溢出text-overflow:ellipsis ellipsis ellipsis
        // (7)背景图片大小background-size:100% 100%
        // (8)transform:scale()

        // 6.h5特性
        // (1)语义化标签：  <header/><footer/><nav/>等
        // (2)音频播放：<audio/>,视频：<video/>
        // (3)canvas绘制图形
        // (4)input的type有多种输入类型；color,month,date,time等
        // (5)新事件：onresize,onscroll等


        // 5
        // nth-child(5),弹性布局，background-size:100%,text-overflow:ellipsis,
        // border-raduis:,box-shawdow,transform:scale(),color:rgba

        // 6
        // 语义化标签<footer,header,nav>
        // canvas
        // input type="month,date,time,tel"
        // <audio><video>
        // 事件：onresize,onscroll

       
    </script>
</body>
</html>